<template>
    <view class="main">
        <view class="item">
            <view class="left">
                <image :src="formData.avatar ? formData.avatar : '/static/test.png'" mode="aspectFill">
                </image>
            </view>
            <view class="right" @click="upload">
                <view class="txt">上传头像</view>
            </view>
        </view>
        <view class="item">
            <view class="left">
                <input type="text" v-model="formData.nickName" placeholder="请输入昵称" />
            </view>
            <view class="right">
                <view class="icon">
                    <nut-icon size="10" custom-color="#777777" name="rect-right"></nut-icon>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="left">
                <input type="number" maxlength="11" v-model="formData.phonenumber" placeholder="请输入手机号码" />
            </view>
            <view class="right">
                <view class="icon">
                    <nut-icon size="10" custom-color="#777777" name="rect-right"></nut-icon>
                </view>
            </view>
        </view>
    </view>

    <view class="btn-box">
        <view class="btn" @click="submit">保存</view>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getUserInfo, updateUser } from '@/api/apiList';
import { onLoad } from '@dcloudio/uni-app';
import { dUpload } from '@/utils/util';

const userInfo = ref({})
const getUser = async () => {
    const res = await getUserInfo()
    if (res.code == 200) {
        userInfo.value = res.data
        const { nickName, phonenumber, avatar } = userInfo.value
        formData.avatar = avatar
        formData.phonenumber = phonenumber
        formData.nickName = nickName
    }
}

onLoad(() => {
    getUser()
})

const formData = reactive({
    nickName: '',
    phonenumber: '',
    avatar: ''
});

const upload = async () => {
    const res = await dUpload()
    formData.avatar = res
};

const submit = async () => {
    uni.showLoading({
        title: '保存中'
    })
    formData.userId = userInfo.value.userId
    const res = await updateUser(formData)
    if (res.code == 200) {
        uni.hideLoading()
        uni.showToast({
            title: '修改成功',
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    }
}

</script>

<style lang="scss" scoped>
.btn-box {
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
        background-color: #e85d50;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 320rpx;
        color: #fff;
        border-radius: 45rpx;
    }
}

.main {
    padding: 30rpx;

    .item:last-child {
        margin-bottom: 0;
    }

    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 40rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;

        .left {
            input {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #000000;
                background-color: #fff;
            }

            image {
                width: 98rpx;
                height: 98rpx;
                border-radius: 50%;
            }
        }

        .right {
            .icon {
                image {
                    width: 23rpx;
                    height: 23rpx;
                }
            }

            .txt {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #000000;
                line-height: 24rpx;
            }
        }
    }
}
</style>
